<template>
	<view class="station_list">
		<u-toast ref="uToast" />
		<u-row gutter="0" class="map-search-box">
			<u-col span="10">
				<view class="search-input-box">
					<view class="select-city">{{city}} </u-icon>
					</view>
					<u-input class="search-input" v-model="search" type="text" />
					<view class="search-btn" @click="get_list">
						<u-icon name="search" color="#ababab" size="40"></u-icon>
					</view>
		
				</view>
			</u-col>
			<u-col span="2" text-align="right">
				<view @click="list" class="list"></view>
			</u-col>
		</u-row>
		<view class="select-model">
			<view class="select-model-box">
				<view :class="['select-model-box-item',{'model-active':type==1}]" @click="change_type(1)">距离最近</view>
				<view :class="['select-model-box-item',{'model-active':type==2}]" @click="change_type(2)">排队最少</view>
				<view :class="['select-model-box-item',{'model-active':type==3}]" @click="change_type(3)">电池最多</view>
			</view>
		</view>
		<view class="changelist-card" v-for="item in station_list">
			<view class="changelist-card-title">
				{{item.stationEntity.name}} <span class="tips">停车收费</span><span :class="['status',{'status-ok':item.stationEntity.status==1}]">正常营业</span>
			</view>
			<view class="changelist-card-address">
				{{item.stationEntity.address}}
			</view>
			<view class="changelist-card-attr">
				<view class="changelist-card-attr-item item1">排队：10</view>
				<view class="changelist-card-attr-item item2">距离:{{Math.round(item.distance/1000*100)/100}}km</view>
				<view class="changelist-card-attr-item item3">电池：20</view>
			</view>
			<view class="changelist-card-date">
				营业时间:00:00:00 - 23:00:00
			</view>
			<view class="changelist-opt">
				<span class="changelist-opt-span1">联系</span>
				<span class="changelist-opt-span2" @click="drive(item)">导航</span>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	let _this;
	export default{
		data(){
			return{
				search:'',
				city: '',
				longitude: '',
				latitude: '',
				type:1,
				station_list:[]
				
			}
		},
		created() {
			_this = this;
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.longitude = option.longitude; //打印出上个页面传递的参数。
			this.latitude = option.latitude; //打印出上个页面传递的参数。
			this.city = option.city; //打印出上个页面传递的参数。
			this.search = option.search; //打印出上个页面传递的参数。
		},
		computed: mapState(['hasLogin', 'userName', 'token']),
		mounted() {
			this.get_list();
		},
		methods:{
			drive(info){
				console.log(info);
				uni.openLocation({
					latitude: info.stationLat,
					longitude: info.stationLng,
					scale: 18
				})
			},
			list(){
				uni.navigateBack({
				    delta: 1
				});
			},
			change_type(type){
				this.type = type;
				this.get_list();
			},
			get_list(){
				uni.request({
					url: this.$store.state.ip + 'station/station/listByProvince', //仅为示例，并非真实接口地址。
					data: JSON.stringify({
						"provinceName": this.city,
						"stationLat": this.latitude,
						"stationLng":this.longitude,
						"type":this.type,
						"keyword":this.search
						
					}),
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + this.token,
					},
					success: (res) => {
						if(res.data.code == 200){
							_this.station_list = res.data.data;
						}else if(res.data.code == '040081'){
							
							_this.$refs.uToast.show({
								title: '登录过期，请重新登录',
								url: '/pages/login/login',
								duration:2000,
								position:'bottom',
								params: {
									id: 1,
									menu: 3
								}
							})
							
							console.log(res);
						}else{
							_this.$refs.uToast.show({
								title: res.data.msg,
								duration: 2000,
								position: 'bottom',
							})
							
						}
						
				
					},
					fail: (res) => {
						console.log(res);
					}
				});
			}
		}
		
	}
</script>

<style>
	
	.station_list{
		width: 100%;
		overflow: auto;
	}
	.map-search-box {
		position: absolute;
		top: 20px;
		height: 50px;
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}
	
	.select-city {
		position: absolute;
		top: 0;
	}
	
	.list {
		float: right;
		width: 52px;
		height: 52px;
		background: url('../../static/img/btn_map_n.png');
	}
	
	.list:active {
		border: none;
		background: url('../../static/img/btn_map_s.png');
	}
	
	.search-input-box {
		border-radius: 50px;
		height: 48px;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
	}
	
	.select-city {
		height: 48px;
		line-height: 52px;
		margin-left: 15px;
		font-size: 14px;
		float: left;
		width: 70px;
	}
	
	.search-input {
		float: left;
		margin-left: 90px;
		margin-top: 7px;
		width: 140px;
	}
	
	.search-btn {
		float: right;
		padding: 13px 15px;
	}
	.select-model{
		margin-top: 90px;
		height: 50px;
		border-top: 1px solid #DEDFE2;
		clear: left;
		background-color: #fff;
	}
	.select-model-box{
		height: 34px;
		margin: 8px 12px;
		background-color: #f0f1f5;
		border-radius: 40px;
	}
	.select-model-box-item{
		float: left;
		width: 33.3%;
		border-radius: 40px;
		height: 34px;
		color: #a5a6ad;
		font-size: 15px;
		text-align: center;
		line-height: 34px;
	}
	.model-active{
		background-color: #1869e0;
		color: #fff;
	}
	.changelist-card{
		background-color: #fff;
		border-radius: 4px;
		margin: 10px 12px 0px 12px;
		padding: 15px 0px 0px 0px;
		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
	}
	.changelist-card-title{
		padding-left: 15px;
		padding-right: 15px;
	}
	.changelist-card-title .status{
		float: right;
		font-size: 16px;
		
	}
	.changelist-card-title .status-ok{
		color: #27cc16;
	}
	.changelist-card-title .tips{
		border: 1px solid #adb0b3;
		border-radius: 4px;
		color: #949799;
		font-size: 10px;
		padding: 2px;
	}
	.changelist-card-address{
		margin-top: 22px;
		margin-bottom: 22px;
		font-size: 13px;
		color: #35374b;
		padding-left: 15px;
		padding-right: 15px;
	}
	.changelist-card-address1{
		margin-top: 22px;
		margin-bottom: 22px;
		font-size: 14px;
		color: #35374b;
		padding-left: 15px;
		padding-right: 15px;
	}
		
	.changelist-card-attr{
		overflow: auto;
		margin-bottom: 18px;
		padding-left: 15px;
		padding-right: 15px;
	}
		
	.changelist-card-attr-item{
		float: left;
		width: 33.3%;
		font-size: 13px;
		color: #35374b;
	}
	.changelist-card-attr-item1{
		float: left;
		width: 33.3%;
		font-size: 14px;
		color: #35374b;
	}
	.changelist-card-attr .item2{
		text-align: center;
	}
	.changelist-card-attr .item3{
		text-align: right;
	}
	.changelist-opt{
		height: 39px;
		background-color: #e6e8eb;
		border-radius: 0 0 4px 4px;
		text-align: right;
		line-height: 39px;
	}
	.changelist-opt span{
		border-radius: 16px;
		font-size: 12px;
		padding: 3px 12px;
		margin-right: 12px;
	}
	.changelist-opt-span2{
		color: #1869e0;
		border: 1px solid #1869e0;
	}
	.changelist-opt-span1{
		color: #35374b;
		border: 1px solid #676a85;
	}
	.changelist-card-date{
		color: #949799;
		font-size: 13px;
		padding-left: 15px;
		padding-right: 15px;
		margin-bottom: 17px;
	}
</style>
